﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贴吧——全球最大中文特区</title>
<style type="text/css">
	*{
		margin:0px;
		padding:0px;
	}
	#bg{
		width:1345px;
		height:1349px;
		
		background-image:url(images/pagebgs/tieba_mainpage_short.png);
	}
	#bg #closer{
		width:70px;
		position:absolute;
		right:10px;
		top:10px;
		
		font-size:12px;
	}
	/**  遮罩层的定义  **/
	#cover1{
		background-color:#CCCCCC;
		position:absolute;
		top:0x;
		left:0px;
		filter:alpha(opacity=50);
		opacity:0.5 !important;
		z-index:5;
	}
	/**  弹出层定义  **/
	/**  弹出层外壳  **/
	#main{
		width:340px;
		height:175px;
		margin:-1px auto;
		border-bottom:1px solid #A1A1A1;
		border-top:1px solid #A1A1A1;
	}
	/**  弹出层  **/
	#login{
		width:370px;
		height:330px;
		
		border:1px solid #709CD2;
		position:absolute;
		left:485px;
		top:130px;
		
		background-color:white;
		z-index:10;
	}
	#login h3{
		width:inherit;
		height:26px;
		line-height:26px;
		
		background-color:#709CD2;
		color:white;
		font-size:14px;
		font-weight:bold;
	}
	#login h3 img{
		width:18px;
		height:17px;
		position:absolute;
		right:10px;
		top:5px;
		vertical-align:center;
	}
	/**  登录弹出层  **/
	#loginMain table{
		width:280px;
		height:auto;
		line-height:30px;
		margin:5px auto;
		font-size:14px;
	}
	#loginMain th{
		font-size:14px;
	}
	#loginMain .loginlabeltd{
		width:50px;
		text-align:right;
	}
	#loginMain .logininputtd{
		width:220px;
		text-align:left;
	}
	#loginMain .textStyle{
		width:140px;
		height:20px;
	}
	#loginMain p{
		width:200px;
		height:20px;
		font-size:12px;
		
		margin:30px auto;
	}
	/**  注册弹出层  **/
	#registerMain .registerlabeltd{
		width:50px;
		text-align:right;
		font-size:12px;
		font-weight:bold;
	}
	
	#registerMain .registerinputtd{
		width:380px;
		text-align:left;
	}
	#registerMain table{
		width:470px;
		height:auto;
		margin:10px auto;
		line-height:30px;
		font-size:12px;
	}
	#registerMain table .registerText{
		width:182px;
		height:26px;
		line-height:26px;
	}
	#registerMain .registerInfo{
		color:#A1A1A1;
		font-size:12px;
		font-weight:normal;
	}
	#registerMain table font.up{
		display:block;
		height:50px;
		margin-top:-10px;
	}
	#registerMain .registerBtn{
		border:none;
		width:98px;
		height:41px;
		background:url(images/passport_reg_btn.gif);
	}
	#registerMain .registerBtn2{
		border:none;
		width:98px;
		height:41px;
		background:url(images/passport_reg_btn.gif) 0 -41px;
	}
	#registerMain p{
		font-size:12px;
		font-weight:normal;
		vertical-align:middle;
		margin:0px auto;
		width:370px;
	}
	#registerMain p input{
		float:left;
	}
	#registerMain p span{
		display:block;
		float:left;
		margin-top:15px;
	}
	#registerMain .errorinfo{
		font-size:12px;
		font-weight:normal;
		color:#FF0000;
	}
	/**  Tab标签层  **/
	#Tab{
		list-style:none;
		margin:10px auto 0px 30px;		
	}
	#Tab li{
		float:left;
		width:55px;
		height:23px;
		margin-right:3px;
		border:1px solid #A1A1A1;
		text-decoration:underline;
		color:blue;
		
		font-size:14x;
		line-height:23px;
		text-align:center;
		z-index:11;
		background-color:#EBF3FE;
	}
	#Tab li.onStyle{
		display:block;
		width:55px;
		height:23px;
		border:1px solid #A1A1A1;
		border-bottom:1px solid white;
		background-color:white;
		color:#000;
		text-decoration:none;
		
		z-index:15;
	}
	#Tab li.offStyle{
		border-bottom:1px solid #A1A1A1;
		background-color:#EBF3FE;
		text-decoration:underline;
	}
	
	.clear{
		clear:both;
	}
</style>
<script language="javascript">

	function login(){
		  var loginname = document.getElementById("loginname").value; 
           var password     = document.getElementById("password").value; 

           if(loginname == "admin" && password == 'admin'){ 
                return true; 

           }else{ 
                alert("您输入了错误的登陆名或密码！"); 
                return false; 

           } 
	}

	// 初始化遮罩层的代码
	function init(){
		  var cover1 = document.getElementById("cover1"); 

           cover1.style.width = document.documentElement.scrollWidth + "px"; 
           cover1.style.height = document.documentElement.scrollHeight + "px"; 
           cover1.style.display = "none"; 

           var loginMain = document.getElementById("loginMain"); 
           var registerMain = document.getElementById("registerMain"); 
           var login = document.getElementById("login"); 

           login.style.display = "none"; 
           loginMain.style.display = "none"; 
           registerMain.style.display = "none"; 
	}
	
	function showLogin(){
		  // 先修改窗体大小 
           var login = document.getElementById("login"); 
           login.style.width = "370px"; 

           login.style.height = "330px"; 
           login.style.left = "485px"; 
           login.style.top = "130px"; 

           var h3 = login.getElementsByTagName("h3")[0]; 
           h3.style.width = "370px"; 
           h3.innerHTML = "&nbsp;&nbsp;    登录 后， 贴吧更精彩 <img id='close' src='images/dialogclose.gif' onclick='closeLogin()'>"; 

           //main 部分的border 改变 
		    var main = document.getElementById("main"); 
          main.style.width = "340px"; 

          main.style.height = "175px"; 
          main.style.borderBottom = "1px solid #A1A1A1"; 

          //导航菜单部分的样式改变 
          var tab1 = document.getElementById("tab1"); 
          var tab2 = document.getElementById("tab2"); 

          tab1.className = "onStyle"; 
          tab2.className = "offStyle"; 

          //  切换显示窗体 
          var loginMain = document.getElementById("loginMain"); 
          var registerMain = document.getElementById("registerMain") 

          login.style.display = "block"; 
          loginMain.style.display = "block"; 
          registerMain.style.display = "none"; 

          // cover1 是遮罩层 
          var cover1 = document.getElementById("cover1"); 
          cover1.style.display = "block"; 
	}
	
	function showRegister(){
		  //  先修改窗体大小 
          var login = document.getElementById("login"); 
          login.style.width = "550px"; 

          login.style.height = "550px"; 
          login.style.left = "395px"; 
          login.style.top = "20px"; 

          var h3 = login.getElementsByTagName("h3")[0]; 
          h3.style.width = "550px"; 
          h3.innerHTML = "&nbsp;&nbsp; 马上加入贴吧，体验更丰富的贴吧之夜<img id='close' src='images/dialogclose.gif' onclick='closeLogin()'>"; 

          //main 部分的border 改变 

          var main = document.getElementById("main"); 
          main.style.width = "520px"; 
          main.style.height = "520px"; 

          main.style.borderBottom = "none"; 

          //导航菜单部分的样式改变 

          var tab1 = document.getElementById("tab1"); 
          var tab2 = document.getElementById("tab2"); 
          tab1.className = "offStyle"; 
     tab2.className = "onStyle"; 

     //  切换显示窗体 
     var loginMain = document.getElementById("loginMain"); 
     var registerMain = document.getElementById("registerMain"); 

      login.style.display = "block"; 
      loginMain.style.display = "none"; 
      registerMain.style.display = "block"; 

     // cover1 是遮罩层 
     var cover1 = document.getElementById("cover1"); 
     cover1.style.display = "block"; 

	}
	
	// 关闭注册登录窗口的程序
	function closeLogin(){
		  var login = document.getElementById("login"); 
		 var cover1 = document.getElementById("cover1"); 
	
		  login.style.display = "none"; 
		 cover1.style.display = "none"; 
	}
	
	// 验证注册用户名
	function ckRegisterName(){
		 var registername = document.registerForm.registername.value; 
     var error = document.getElementById("registerNameInfo"); 

      if(registername.length==0){ 
           error.innerHTML = "用户名不能为空！"; 
           return false; 

      }else if(registername.length>14){ 
           error.innerHTML = "用户名长度过长，请返回重新输入！"; 
           return false; 

      }else{ 
           error.innerHTML = ""; 
           return true; 

      } 
	}
	
	// 验证用户密码
	function ckRegisterPassword(){
		 var registerPassword = document.getElementById("registerpassword").value; 

     	 var error = document.getElementById("registerPasswordInfo"); 

      if(registerPassword.length < 6 || registerPassword.length>14){ 

 
           error.innerHTML = "密码格式错误！"; 
           return false; 

      }else{ 
           error.innerHTML = ""; 
           return true; 

      } 
	}
	
	// 验证确认密码
	function ckRegisterRepassword(){
	  var registerPassword = document.getElementById("registerpassword").value; 

      var registerRepassword = document.getElementById("registerrepassword").value; 

      var error = document.getElementById("registerRepasswordInfo"); 

      if(registerPassword != registerRepassword){ 
           error.innerHTML = "密码和确认密码不一致！"; 

           return false; 
      }else{ 
           error.innerHTML = ""; 

           return true; 
      } 
	}
	
	// 验证邮箱格式
	function ckEmail(){
		var email = document.registerForm.email.value; 
      var reg = /^\w+((-\w+)|(\.\w+))*\@[a-zA-Z0-9]+((\.|-)[a-zA-Z0-9]+)*\.[a-zA-Z0-9]+$/; 

      var error = document.getElementById("registerEmailInfo"); 

      if(!reg.test(email)){ 

           error.innerHTML = "邮箱格式不正确！"; 
           return false; 
      }else{ 

           error.innerHTML = ""; 
           return true; 
      } 
	}
	
	// 验证出生日期
	function ckTime(){
		var year = document.registerForm.year.value; 
 	    var month = document.registerForm.month.value; 
       var date    = document.registerForm.date.value; 

           var error = document.getElementById("registerTimeInfo"); 
           if(year == 0 || month == 0 || date == 0){ 
                 error.innerHTML = "请选择您的出生日期"; 

                 return false; 
           }else{ 
                 error.innerHTML = ""; 

                 return true; 
           } 
	}
	
	// 验证居住地选择
	function ckCity(){
		   var province = document.registerForm.province.value; 
           var city = document.registerForm.city.value; 

           var error = document.getElementById("registerRegionInfo"); 

           if(province == 0 || city == 0){ 

                 error.innerHTML = "请选择您的居住地"; 
                 return false; 
           }else{ 

                 error.innerHTML = ""; 
                 return true; 
           } 
	}
	
	// 表单验证函数
	function checkRegister(){
		  var checkCode = document.getElementById("checkCode").value; 
           if(checkCode != '7HX2'){ 

                 alert("验证码输入错误，请重新输入！"); 
                 return false; 
           } 

           if(ckRegisterName()       &&    ckRegisterPassword()       &&     ckRegisterRepassword()       && 
ckEmail() && ckTime() && ckCity()){ 

                 if(confirm("确定要提交注册信息么？")){ 
                      return true; 
                 }else{ 

                      alert("您取消了注册信息的提交！"); 
                      return false; 
                 } 

            }else{ 
                  alert("您的注册信息有误！"); 

                  return false; 
            } 
	}
	
	// 省市级联效果
	function chooseCity(){
		var array = new Array();
		array['河南'] = ['郑州','开封','洛阳','安阳','商丘'];
		array['河北'] = ['石家庄','邯郸','廊坊','衡水','保定'];
		array['甘肃'] = ['兰州','张掖','天水','武威','平凉'];
		
		 var province = document.getElementById("province"); 
         var city = document.getElementById("city"); 

            city.options.length = 0; 
            //var optZero = document.createElement("option"); 
            //optZero.innerHTML = "地区/市"; 

            //optZero.value = 0; 
            //city.options.add(optZero); 
            for(var index in array[province.value]){ 

                  var opt = document.createElement("option"); 
                  opt.text = array[province.value][index]; 
                  opt.value = array[province.value][index]; 

                  city.options.add(opt); 
            } 
			
	}
	
	window.onload = init;
</script>
</head>

<body>
	<div id="bg">
        <div id="cover1"></div>
        <div id="closer"><a href="#" onclick="showRegister()">注册</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" onclick="showLogin()">登录</a></div>
        
        <div id="login">
        	<h3>&nbsp;&nbsp;登录后，贴吧更精彩<img id="close" src="images/dialogclose.gif" onclick="closeLogin()"></h3>
            <ul id="Tab">
                <li id="tab1" onclick="showLogin()" class="onStyle">登录</li>
                <li id="tab2" onclick="showRegister()" class="offStyle">注册</li>
                <div class="clear"></div>
            </ul>	
            <div id="main">
                <!--  下面是登录窗体  -->
                <div id="loginMain">
                	<form name="loginForm" id="loginForm" action="百度贴吧首页面.html" onsubmit="return login()">
                	<table cellpadding="0" cellspacing="0" border="0">
                    	<tr>
                        	<th colspan="2" style="text-align:left">百度注册用户请直接登录</th>
                        </tr>
                        <tr>
                        	<td class="loginlabeltd">用户名：</td>
                            <td class="logininputtd"><input type="text" name="loginname" id="loginname" class="textStyle"/></td>
                        </tr>
                         <tr>
                        	<td class="loginlabeltd">密&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
                            <td class="logininputtd"><input type="password" name="password" id="password"  class="textStyle"/></td>
                        </tr>
                        <tr>
                        	<td class="loginlabeltd">&nbsp;&nbsp;</td>
                            <td class="logininputtd">
                            	<input type="checkbox" name="loginStatus" id="loginStatus" checked="checked"/>
                                <font style="font-size:12px;">&nbsp;&nbsp;记住我的登录状态
                            </td>
                        </tr>
                        <tr>
                        	<td class="loginlabeltd">&nbsp;&nbsp;</td>
                            <td class="logininputtd">
                            	<input type="submit" name="loginBtn" id="loginBtn" value="登录" style="width:60px;"/>
                            	<a href="#"><font style="font-size:12px">忘记密码</font></a>
                            </td>
                        </tr>
                   </table>
                   </form>
                   <p>
                   		没有百度帐号？
                        <a href="#"><font style="font-weight:bold">立即注册百度帐号</a>
                   </p>
                </div>
                
                <!--  下面是注册窗体  -->
                <div id="registerMain">
                	<form name="registerForm" action="百度贴吧首页面.html" onsubmit="return checkRegister()">
                	<table cellpadding="0" cellspacing="0" border="0">
                    	<tr>
                        	<td class="registerlabeltd"><font class="up">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</font></td>
                            <td class="registerinputtd">
                            	<input type="text" name="registername" id="registername" class="registerText" onblur="ckRegisterName()"/>
                                &nbsp;&nbsp;<span id="registerNameInfo" class="errorinfo"></span>
                                <br />
                            	<font class="registerInfo">不超过7个汉字，或14个字节(数字，字母和下划线)</font>
                            </td>
                        </tr>
                    	<tr>
                        	<td class="registerlabeltd"><font class="up">设置密码：</font></td>
                            <td class="registerinputtd">
                            	<input type="password" name="registerpassword" id="registerpassword" class="registerText" onblur="ckRegisterPassword()"/>
                                &nbsp;&nbsp;<span id="registerPasswordInfo" class="errorinfo"></span>
                                <br />
                                <font class="registerInfo">密码长度6～14位，字母区分大小写</font>
                            </td>
                        </tr>
                    	<tr>
                        	<td class="registerlabeltd"><font class="up">确认密码：</font></td>
                            <td class="registerinputtd">
                            	<input type="password" name="registerrepassword" id="registerrepassword" class="registerText" onblur="ckRegisterRepassword()"/>
                                &nbsp;&nbsp;<span id="registerRepasswordInfo" class="errorinfo"></span>
                                <br />
                                <font class="registerInfo">和密码一致</font>
                            </td>
                        </tr>
                    	<tr>
                        	<td class="registerlabeltd"><font class="up">电子邮件：</font></td>
                            <td class="registerinputtd">
                            	<input type="text" name="email" id="mail" class="registerText" onblur="ckEmail()"/>
                                &nbsp;&nbsp;<span id="registerEmailInfo" class="errorinfo"></span>
                                <br />
                                <font class="registerInfo">请输入有效的邮件地址，当密码遗失时凭此领取</font>
                            </td>
                        </tr>
                    	<tr>
                        	<td class="registerlabeltd">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</td>
                            <td class="registerinputtd">
                            	<input type="radio" name="sex" id="male" checked="checked" value="男"/>男
                                <input type="radio" name="sex" id="male" checked="checked" value="女"/>女
                            </td>
                        </tr>
                    	<tr>
                        	<td class="registerlabeltd">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日：</td>
                            <td class="registerinputtd">
                            <select id="year" onblur="ckTime()">
                            <option value="0">年</option>
							<script language="javascript">
								for(var i=2011; i>=1900; i--){
									document.write('<option value="'+ i +'">'+ i +'</option>');
								}
                            </script>
                            </select>
                            <select id="month" onblur="ckTime()">
                            <option value="0">月</option>
							<script language="javascript">
								for(var i=1; i<=12; i++){
									document.write('<option value="'+ i +'">'+ i +'</option>');
								}
                            </script>
                            </select>
                            <select id="date" onblur="ckTime()">
                            <option value="0">日</option>
							<script language="javascript">
								for(var i=1; i<=31; i++){
									document.write('<option value="'+ i +'">'+ i +'</option>');
								}
                            </script>
                            </select>
                            &nbsp;&nbsp;<span id="registerTimeInfo" class="errorinfo"></span>
                            </td>
                        </tr>
                    	<tr>
                        	<td class="registerlabeltd">居&nbsp;&nbsp;住&nbsp;&nbsp;地：</td>
                            <td class="registerinputtd">
                           	<select name="province" id="province" onblur="ckCity()" onchange="chooseCity()">
                               	<option value="0">省/市</option>
                                <option value="河南">河南</option>
                                <option value="河北">河北</option>
                                <option value="甘肃">甘肃</option>
                            </select>&nbsp;&nbsp;-&nbsp;&nbsp;
                            <select name="city" id="city">
                               	<option value="0" onblur="ckCity()">地区/市</option>
                            </select>
                            &nbsp;&nbsp;<span id="registerRegionInfo" class="errorinfo"></span>
                            </td>
                        </tr>
                    	<tr>
                        	<td class="registerlabeltd">验&nbsp;&nbsp;证&nbsp;&nbsp;码：</td>
                            <td class="registerinputtd">
                            	<input type="text" name="checkCode" id="checkCode" style="width:50px;height:16px;float:left;margin:15px 5px auto auto;" />
                                <img src="images/passport.jpeg" style="border:1px solid #A1A1A1;float:left;margin:0 5px;"/>
                                <a href="#" style="font-weight:normal;float:left;">看不清?</a>
                            </td>
                        </tr>
                    </table>
                    <p>
                    	<input type="submit" name="registerBtn" id="registerBtn" class="registerBtn" value="" onmouseout="this.className='registerBtn'" onmouseover="this.className='registerBtn2'"/>
                        <span><font style="color:#555">&nbsp;&nbsp;&nbsp;&nbsp;点击“立即注册”表示您同意并遵守</font><a href="#">百度用户协议</a></span>
                    	<div id="clear"></div>
                    </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
